<template>
  <h1>日期时间选择器组件</h1>
  <el-date-picker type="date" v-model="rq" placeholder="请选择日期"
                  @change="console.log(rq)"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD">
  </el-date-picker>
  <br>
  <el-date-picker type="datetime" v-model="sj" placeholder="请选择日期"
                  @change="console.log(sj)"
                  format="YYYY-MM-DD HH-mm-ss"
                  value-format="YYYY-MM-DD HH-mm-ss">
  </el-date-picker>
  <br>
  <el-date-picker type="datetimerange" v-model="times"
                  @change="f" format="YYYY-MM-DD HH-mm-ss"
                  value-format="YYYY-MM-DD HH-mm-ss"
                  start-placeholder="入住时间"
                  end-placeholder="退房时间"></el-date-picker>
</template>

<script setup>
  import {ref} from "vue";

  const rq=ref('');
  const sj=ref('');
  const times=ref([]);
  const f=()=>{
    console.log(times.value);
  }
</script>

<style scoped>

</style>